import * as React from 'react'
import { connect } from 'react-redux'
import { fetchBingPhotos } from '../../store/bing/action'
import Posts from '../posts'

class Wallpaper extends React.Component<IAnyObject, IAnyObject> {
  constructor(props: IAnyObject) {
    super(props)
  }

  public componentWillMount() {
    this.props.dispatch(fetchBingPhotos({
      idx: 4,
      n: 1
    }))
  }

  public render() {
    if (this.props.photos.url) {
      return (
        <div
          style={{
            height: '100vh',
            width: '100vw',
            backgroundImage: `url(https://cn.bing.com${this.props.photos.url})`,
            backgroundSize: 'cover'
          }}
        >
          <Posts />
        </div>
      )
    }
    return <div />
  }
}

const mapStateToProps = (state: IAnyObject) => ({
  photos: state.bingPhotos
})

export default connect(mapStateToProps)(Wallpaper)
